<template>
  <List :class="prefixCls">
    <Row :gutter="16">
      <template v-for="item in applicationList" :key="item.title">
        <Col :span="6">
          <ListItem class="list-item" v-slide-in @click="onClick(item)">
            <Card :hoverable="true" :class="`${prefixCls}__card`">
              <div :class="`${prefixCls}__card-title`">
                <!-- <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" /> -->
                {{ item.title }}
              </div>
              <div>
                <img class="img" :src="`${getPhotoUrl}${item.dataId}`" alt="" />
              </div>
            </Card>
          </ListItem>
        </Col>
      </template>
    </Row>
  </List>
  <DrawerEat @register="register" />
</template>
<script lang="ts" setup>
  import { List, Card, Row, Col } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';
  // import { applicationList } from './data';
  import { ref, onMounted } from 'vue';
  import { nutritionPageApi } from '@/api/jiankang/nutrition';
  import { getAuthCache } from '@/utils/auth';
  import { USER_INFO_KEY } from '@/enums/cacheEnum';
  import { getPhotoUrl } from '@/api/sys/upload';
  import DrawerEat from './components/DrawerEat.vue';
  import { useDrawer } from '@/components/Drawer';

  const userInfo: any = getAuthCache(USER_INFO_KEY);

  const ListItem = List.Item;

  const prefixCls = 'account-center-application';

  const applicationList = ref([]);
  const [register, { openDrawer, setDrawerProps }] = useDrawer();

  async function getNutritionPageData() {
    const { records } = await nutritionPageApi({ current: 1, size: 200, uid: userInfo.id });
    console.log(records);
    applicationList.value = records;
  }

  onMounted(() => {
    getNutritionPageData();
  });

  function onClick(data) {
    openDrawer(true, { data });
    setDrawerProps({ loading: true });
    setTimeout(() => {
      setDrawerProps({ loading: false });
    }, 500);
  }
</script>
<style lang="less">
  .account-center-application {
    &__card {
      width: 100%;
      margin-bottom: -12px;

      .ant-card-body {
        padding: 16px;
      }

      &-title {
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 500;

        .icon {
          margin-top: -5px;
          font-size: 22px;
        }
      }

      &-num {
        margin-left: 24px;
        color: @text-color-secondary;
        line-height: 36px;

        span {
          margin-left: 5px;
          font-size: 18px;
        }
      }

      &-download {
        float: right;
        color: @primary-color;
        font-size: 20px !important;
      }
    }
    .img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
  }
</style>
